<!--
* @description  
* @fileName  1_v-text
* @author zhoujunlin
* @date 2022-03-20 20:51:00
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_v-text</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 
回顾：
v-bind:单向绑定解析表达式 可简写为 :xxx
v-model:双向数据绑定
v-for:遍历数组、对象，字符串
v-on:绑定事件监听 简写为@
v-if:条件渲染（动态控制节点是否存在）
v-else:条件渲染（动态控制节点是否存在）
v-show:条件渲染（动态控制节点是否显示）

v-text:
1. 作用：向其所在节点中渲染文本内容，放入标签则也会被当成文本解析
2. 与插值语法的区别：v-text会替换掉节点中的内容，你原来的内容会被代替
无法与原来的内容一起出现，{{xx}}则可以
 -->

<body>
    <div id="app">
        <div>你好，{{name}}</div>
        <div v-text="name">你好</div>
        <div v-text="str">你好</div>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'vue',
                    str:'<h3>你好啊，VUE</h3>'
                }
            }
        });

    </script>
</body>

</html>